<template>
  <el-dialog :model-value="visible" width="60%" append-to-body @close="cancel">
    <div slot="header" class="dialog-title flex justify-between box-align-center">
      <span class="dialog-title-text">选择员工</span>
      <div class="tishi ml20">
        <el-icon>
          <Warning />
        </el-icon>
        若是员工账号不可用，则无法选择
      </div>
    </div>

    <div class="boardBox mt20">
      <div class="dialog-left">
        <el-tree :props="treeProps" :load="loadNode" lazy show-checkbox @check-change="handleCheckChange" />
      </div>
      <div class="dialog-right flex-1 ml20">
        <el-form ref="queryForm" :inline="true" label-width="70px" class="mt20" :model="queryParams">
          <el-form-item>
            <el-select v-model="queryParams.selectvalue" placeholder="选择" style="width: 240px">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            
          </el-form-item>
          <el-form-item>
            <el-input v-model="queryParams.keywords" placeholder="请输入员工姓名/手机号查询" clearable style="width: 240px" />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" size="mini" color="#01509f">搜索</el-button>
          </el-form-item>
        </el-form>

        <el-table
          :data="list"
          border
          @selection-change="handleSelectionChange"
          v-loading="loading"
          element-loading-background="rgba(0, 0, 0, 0.5)"
          element-loading-text="加载中..."
          class="rounded-table"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="序号" width="80" align="center">
            <template #default="{ $index }">
              {{ $index + (pageInfo.page - 1) * pageInfo.limit + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="姓名" align="center" key="name" prop="name" />
          <el-table-column label="手机号" align="center" key="phone" prop="phone" />
          <el-table-column label="实名状态" align="center" key="shiming" prop="shiming" />
          <el-table-column label="状态" align="center" key="statue" prop="statue" />
        </el-table>


            <div class="width100 mt20" style="text-align: right;">
              <el-button type="primary" size="mini" color="#01509f">下一步</el-button>
            </div>     
      </div>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button color="#01509f" type="primary" @click="submitForm">生成邀请链接</el-button>
      </div> -->
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
  import { ref, reactive, watch } from "@/TUIKit/adapter-vue";
  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
  });

  const options = ref([
    { value: "option1", label: "选项一" },
    { value: "option2", label: "选项二" },
    { value: "option3", label: "选项三" },
    { value: "option4", label: "选项四" },
  ]);
  const pageInfo = ref({ page: 1, limit: 10 });
  const list = ref([
    { name: "123", phone: "12354566", shiming: "未实名", statue: "正式" },
    { name: "123", phone: "12354566", shiming: "未实名", statue: "正式" },
  ]);
  const loading = ref(false);
  const emit = defineEmits<{ (event: "update:visible", value: boolean): void; (event: "confirm", selectedKeys: ElTreeNodeKey[]): void;(event: "chananniu", value: ""): void }>();
  const queryParams = ref({ keywords: "", selectvalue: "" });
  // 监听 localValue 的变化，通知父组件更新值
  watch(
    () => props.visible,
    newValue => {}
  );

  function cancel() {
    emit("update:visible", false);
         emit("chananniu",'');
    console.log("cancel");
  }
  function submitForm() {
    // 在这里处理表单提交逻辑，例如发送请求到服务器
     emit("confirm", selectedKeys);
     emit("chananniu",'');

    //console.log("Form submitted:", queryParams.value);
    // 通知父组件更新 visible 为 false
    emit("update:visible", false);
  }

  interface Tree extends ElTreeData {
    name: string;
    // 可按需添加更多属性
  }

  const treeProps = ref({
    label: "name",
    children: "zones",
  });
  // 定义节点加载函数
  const count = ref(1);
  const loadNode = (node: InstanceType<typeof ElTree>["node"], resolve: (data: Tree[]) => void) => {
    if (node.level === 0) {
      return resolve([{ name: "Root1" }, { name: "Root2" }]);
    }
    if (node.level > 3) return resolve([]);

    let hasChild = false;
    if (node.data.name === "region1") {
      hasChild = true;
    } else if (node.data.name === "region2") {
      hasChild = false;
    } else {
      hasChild = Math.random() > 0.5;
    }

    setTimeout(() => {
      let data: Tree[] = [];
      if (hasChild) {
        data = [
          {
            name: `zone${count.value++}`,
          },
          {
            name: `zone${count.value++}`,
          },
        ];
      }
      resolve(data);
    }, 500);
  };

  // 定义复选框状态变化处理函数
  const handleCheckChange = (data: Tree, checked: boolean, indeterminate: boolean) => {
    console.log(data, checked, indeterminate);
  };

  function handleSelectionChange(val) {
    console.log(val);
  }
</script>

<style lang="scss" scoped>
.boardBox {
  display: flex;
  align-items: center;
  justify-content: space-around;
  overflow-y: scroll;
  max-height: calc(100vh - 210px);

  &::-webkit-scrollbar {
    display: none;
  }

  -ms-overflow-style: none;
  scrollbar-width: none;

  .dialog-left {
    width: 30%;
    border: solid 1px #eaeaea;
    padding: 10px;
  }

  .dialog-right {
    border: solid 1px #eaeaea;
    padding: 10px;
  }
}

.dialog-title-text {
  font-size: 18px;
  color: #000;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

.tishi {
  font-size: 14px;
  color: #999;
  background-color: #f3f8fb;
  padding: 5px 10px;
  border-radius: 6px;
}
</style>
